<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>51VR</title>
</head>
<style>
    * {
        box-sizing: border-box;
        /* 禁止鼠标选中文字 */
        -moz-user-select: none;
        -o-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    ul,
    li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    body {
        margin: 0;
        padding: 0;
        /* background-color: #ccc; */
    }


    .title {
        width: 176px;
        height: 33px;
        line-height: 33px;
        padding-left: 8px;
        cursor: pointer;
        font-size: 16px;
        color: #fff;

    }

    /* title颜色匹配值 */
    .bg-0 {
        background: linear-gradient(225deg, transparent 8px, #f7e975 0);
    }

    .bg-1 {
        background: linear-gradient(225deg, transparent 8px, #f26a73 0);
    }

    .bg-2 {
        background: linear-gradient(225deg, transparent 8px, #f3b272 0);
    }

    .bg-3 {
        background: linear-gradient(225deg, transparent 8px, #7ed35a 0);
    }

    .content {
        width: 152px;
        background-color: rgba(255, 255, 255, .5);
        color: black;
    }



    ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-items: center;
        padding: 5px 0 5px 8px;
    }

    #default {
        display: none;
    }

    .span-default {
        font-size: 12px;
    }

    .span-title {
        font-size: 12px;
        color: #808080;
    }

    .span-extra {
        font-size: 12px;
        color: black;
    }
</style>

<body>
    <div id="app">

    </div>
    <script>
        let template = parseHTMLTemplate(function() {
            /*
             <div id="app">
                <div id="title" class="title cover">${queryTitle}</div>
                <div id="content" class="content content-checked">
                  <span id="default" class="span-default">Lift Address:${queryContent}</span>
                  <ul>
                    <li>
                      <div class="span-title">${title1}</div>
                      <div class="span-extra">${extra1}</div>
                    </li>
                    <li>
                      <div class="span-title">${title2}</div>
                      <div class="span-extra">${extra2}</div>
                    </li>
                    <li>
                      <div class="span-title">${title3}</div>
                      <div class="span-extra">${extra3}</div>
                    </li>
                    <li>
                      <div class="span-title">${title4}</div>
                      <div class="span-extra">${extra4}</div>
                    </li>
                    <li>
                      <div class="span-title">${title5}</div>
                      <div class="span-extra">${extra5}</div>
                    </li>
                  </ul>
                </div>
              </div>
            */
        });

        let objectTep = render();
        let newHTML = template(objectTep);
        document.getElementById('app').innerHTML = newHTML
        let title = document.getElementById('title');
        // title.addEventListener('click', (e) => {
        //     w51_event('tz', 'lc');
        // })
        //匹配颜色
        let obj = GetRequest();
        let objContent = JSON.parse(obj.content);
        let state = objContent.state
        switch (state) {
            case 0:
                title.classList.add('bg-0')
                break
            case 1:
                title.classList.add('bg-1')
                break
            case 2:
                title.classList.add('bg-2')
                break
            case 3:
                title.classList.add('bg-3')
                break
        }
        //点击标题显示隐藏Window
        // title.onclick = function(val) {
        //     let content = document.getElementById('content');
        //     let className = content.className;
        //     let value = content.innerHTML;
        //     let classNameEnd = '';
        //     if (className === 'content') {
        //         classNameEnd = 'content-checked'
        //         document.getElementById('default').style.display = "none";
        //     } else {
        //         classNameEnd = 'content'
        //         document.getElementById('default').style.display = "block";
        //     }
        //     content.setAttribute('class', classNameEnd)
        // }
        //获取html后面的参数列表
        function GetRequest() {
            var url = location.search; //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }
        //解析模板字符串
        function parseHTMLTemplate(functionObject) {
            return function(scope) {
                return functionObject.toString().match(/\/\*([\s\S]*?)\*\//)[1].replace(/\$\{\w.+\}/g, function(variable) {
                    var value = scope;
                    variable = variable.replace('${', '').replace('}', '');
                    variable.split('.').forEach(function(section) {
                        value = value[section];
                    });
                    return value;
                });
            }
        };


        // 返回模板所需数据
        function render() {
            let obj = GetRequest();
            console.log(obj, '参数对象');
            let content = JSON.parse(obj.content);
            let state = content.state
            let queryTitle = ''
            switch (state) {
                case 0:
                    queryTitle = 'Flaw Detected'
                    break
                case 1:
                    queryTitle = 'Passenger Trapped'
                    break
                case 2:
                    queryTitle = 'Under Maintenance'
                    break
                case 3:
                    queryTitle = 'Working'
                    break
            }
            //内容对象
            return {
                'queryTitle': queryTitle,
                'queryContent': content.liftaddress,
                'title1': 'Lift Address:',
                'extra1': content.liftaddress,
                'title2': 'Town Council:',
                'extra2': content.towncuncil,
                'title3': 'Landings Location:',
                'extra3': content.landingslocation,
                'title4': 'Motor Room Location:',
                'extra4': content.motorroomlocation,
                'title5': 'Maintenance Company:',
                'extra5': content.maintenancecompany,
            }
        }
    </script>
</body>

</html>